<!--
 * @Description: 
 * @Author: charles
 * @Date: 2021-05-05 22:02:56
 * @LastEditors: 梁清福
 * @LastEditTime: 2022-01-10 20:57:55
-->
<template>
  <div ref="bottom4" style="height:95%"></div>
</template>
 <script>

import { Line } from '@antv/g2plot';
 export default {
   data() {
     return{
       dataArr:[
          

       ]
     }
   },
   mounted(){ 
     this.initChart()
    
   },
   methods:{
   

     initChart(){
    fetch('https://gw.alipayobjects.com/os/bmw-prod/55424a73-7cb8-4f79-b60d-3ab627ac5698.json')
  .then((res) => res.json())
  .then((data) => {
    const line = new Line(this.$refs.bottom4, {
      data,
      xField: 'year',
      yField: 'value',
      seriesField: 'category', 
      xAxis: {
        type: 'time',
      },
      yAxis: {
        label: {
          // 数值格式化为千分位
          formatter: (v) => `${v}`.replace(/\d{1,3}(?=(\d{3})+$)/g, (s) => `${s},`),
        },
      },
    });

    line.render();
  });

     }
   }
 }
 </script>
 